<template>
  <div class="textarea-field" :class="getIndentClass(modelValue.alignment)">
    <!-- 字段名称 -->
    <div class="field-name-container">
      <span v-if="modelValue.prefixSymbol && modelValue.prefixSymbol !== 'none'" class="prefix-symbol">
        {{ getPrefixSymbol() }}
      </span>
      <el-input 
        v-model="modelValue.fieldName" 
        placeholder="字段名称"
        class="field-name-input"
        :class="{ 'bold-text': modelValue.isBold }"
        :style="{ maxWidth: '100%' }"
        type="textarea"
        :autosize="{ minRows: 1, maxRows: 3 }"
        @input="updateFieldName"
        @change="handleFieldNameChange"
      />
    </div>
    
    <!-- 文本域行数显示 -->
    <div class="textarea-lines-display">
      <div 
        v-for="n in modelValue.rows" 
        :key="n" 
        class="line-placeholder"
      ></div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
    default: () => ({
      value: '',
      fieldName: '',
      rows: 3,
      alignment: 'indent-0',
      prefixSymbol: '',
      isBold: false
    })
  }
})

const emit = defineEmits(['update:modelValue'])

// 更新字段名称
const updateFieldName = (value) => {
  emit('update:modelValue', {
    ...props.modelValue,
    fieldName: value
  })
}

// 获取缩进类
const getIndentClass = (alignment) => {
  const indentMap = {
    'indent-0': 'indent-0',
    'indent-1': 'indent-1',
    'indent-2': 'indent-2',
    'indent-3': 'indent-3',
    'indent-4': 'indent-4',
    'indent-5': 'indent-5'
  }
  return indentMap[alignment] || 'indent-0'
}

// 获取前缀符号
const getPrefixSymbol = () => {
  const symbolMap = {
    'dot_circle': '⏺',
    'star': '✧',
    'pointer': '☞',
    'arrow_curved': '⮚',
    'square': '⯀',
    // backward compatibility
    'triangle': '▶',
    'dot': '●',
    'wing_triangle': '▶',
    'wing_dot': '●'
  }
  return symbolMap[props.modelValue.prefixSymbol] || ''
}

// 计算文本宽度（保留但不再用于字段宽度）
const getTextWidth = (text, fontSize = '14px', fontFamily = 'Arial') => {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  context.font = `${fontSize} ${fontFamily}`
  return context.measureText(text).width
}

// 获取字段名称宽度（不再绑定到样式，保留备用）
const getFieldNameWidth = () => {
  const text = props.modelValue.fieldName || '字段名称'
  const width = getTextWidth(text, '14px', 'Arial')
  return `${Math.max(width + 20, 60)}px`
}

const handleFieldNameChange = () => {
  // trim 去除空格
  props.modelValue.fieldName = props.modelValue.fieldName.trim();
};
</script>

<style lang="scss" scoped>
@import '@/assets/common-styles.scss';

.textarea-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  
  .field-name-container {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
  }
  
  /* 确保字段名称可折行显示 */
  .field-name-input :deep(.el-textarea__inner) {
    white-space: normal;
    word-break: break-all;
    overflow: visible;
    resize: none;
  }
  
  .textarea-lines-display {
    width: 100%;
    
    .line-placeholder {
      width: 100%;
      height: 24px;
      line-height: 24px;
      margin-bottom: 4px;
      border-bottom: 1px solid #000;
      box-sizing: border-box;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style> 